<template>
    <my-dialog class="dialog-product" v-model="model" title="购买详情" width="700px" @close="close">

        <div class="product-items">

            <p>您将要购买这篇文档 <span class="data-name">{{data.docname}}</span>  。需要支付  <span class="data-name">￥{{data.price}} 元 </span></p>
            
            <p>  </p>
        </div>

        <div class="btn">
            <div class="row">
                <el-button type="warning" @click="payHandler">立即购买</el-button>
            </div>

            <div class="row">
                <el-checkbox v-model="clauseChecl">我已阅读并接受</el-checkbox>
                <span class="btn-clause" @click="dialogVisible = true">
                    《用户协议及隐私政策》
                </span>
            </div>
        </div>

        <dialog-clause v-model="dialogVisible" title="用户协议及隐私政策" type="login"></dialog-clause>

        <dialog-pay ref="payer" :isSetVip="false" @success="paySuccessHandler"></dialog-pay>
    </my-dialog>
</template>

<script>
import DialogClause from '@components/sys/dialog-clause';
import Model from '@/mixins/model.js';
import DialogPay from './dialog-pay.vue';
import MyMath from '../mixins/math';

import { mapActions } from 'vuex';

export default {
    mixins: [Model, MyMath],
    props: {
        value: {
            type: Boolean,
            default: false,
        },
        // projectids: {
        //     type: [String, Boolean],
        //     default: false,
        // },
        data:{
            type: Object,
            default: () => {},
        }
    },
    components: {
        DialogClause,
        DialogPay,
    },
    data() {
        return {
            form: {
                realamount: 0,
                productnum: 1,
                projectnames: '',  //名称
                projectids: '',    //id
                projecttype: 'document',
            },
            clauseChecl: false,
            dialogVisible: false,
            selected: [],
            dataList: [],
        };
    },
    watch: {
        // projectids: {
        //     immediate: true,
        //     handler(n, o) {
        //         this.queryData();
        //     },
        // },
    },
    computed: {},
    methods: {
        ...mapActions({
            showLogin: 'global-dialog/showLogin',
            queryUserInfo: 'userinfo/queryUserInfo',       // 更新个人中心 信息
        }),
        handleClick(item) {
            let res = this.selected.includes(item.name);
            if (!res) {
                this.selected = [...this.selected, item.name];
            } else {
                this.selected = this.selected.filter((item1) => item1 != item.name);
            }

            if (!!this.selected && this.selected.length > 0) {
                let arr = [];
                arr = this.dataList.filter((item2) => this.selected.includes(item2.name));
                this.form.realamount = arr.map((item) => item.realamount).reduce((total, num) => this.accAdd(total, num));
                this.form.projectnames = arr.map((item) => item.name).toString();
                this.form.projectids = arr.map((item) => item.rowguid).toString();
            } else {
                this.form = {
                    realamount: 0,
                    productnum: 1,
                    projectnames: '',
                    projectids: '',
                };
            }
        },
        isSelected(item) {
            let res = this.selected.includes(item.name);
            return res ? true : false;
        },
        payHandler() {
            const SERIAL_CODE = this.$cookies.get('SERIAL_CODE');

            new Chain()
                // .link((next) => {
                //     if (!this.selected || this.selected.length <= 0) {
                //         showMsgBox('请选择要购买的产品');
                //         return true;
                //     }

                //     next();
                // })
                .link((next) => {
                    if (!SERIAL_CODE) {
                        this.showLogin(() => {
                            this.payHandler();
                        });

                        return true;
                    }

                    next();
                })
                .link((next) => {
                    if (!this.clauseChecl) {
                        showMsgBox('请阅读并接受《用户协议及隐私政策》');
                        return true;
                    }

                    next();
                })
                .link((next) => {
                    // 调起支付
                    // this.form
                    this.form.realamount = this.data.price;
                    this.form.projectnames = this.data.docname;
                    this.form.projectids = this.data.guid;
                    this.$refs.payer.initHandler(this.form);
                })
                .run();
        },
        paySuccessHandler() {
            this.model = false;
            this.queryUserInfo({ requery: true });
            console.log(' ,paySuccessHandler');
            this.$emit('getPaySuccess');
            // this.goto('/user/order');
        },
        queryData() {
            return;
            this.$ajax({
                type: 'get',
                url: `${this.$store.state.api.tbUrl}/center/buylist.json`,
                data: {},
                callback: function (data, res) {
                    this.dataList = data;

                    if (!!this.projectids) {
                        // this.form.projectids = this.projectids;

                        // 转换成id数组
                        let idsArr = this.projectids.split(',');

                        // 根据id筛选出已选中的数据
                        let arr = this.dataList.filter((item) => idsArr.includes(item.rowguid));

                        this.form.projectids = arr.map((item) => item.rowguid).toString();

                        this.selected = arr.map((item) => item.name);

                        this.form.realamount = arr.map((item) => item.realamount).reduce((total, num) => this.accAdd(total, num));
                        this.form.projectnames = arr.map((item) => item.name).toString();
                    }
                },
                error: function () {},
            });
        },
        /**
         * 有效期类型
         * @param {String} type 类型
         * @returns {String} 类型
         */
        timeLimitType(type) {
            let switchObj = {
                1: function () {
                    return '月';
                },
                2: function () {
                    return '年';
                },
                3: function () {
                    return '季度';
                },
                4: function () {
                    return '天';
                },
                5: function () {
                    return '周';
                },
            };

            return switchObj[type]();
        },
        close() {
            this.queryData();
            this.$emit('close');
        },
    },
    mounted() {
        this.queryData();
    },
};
</script>

<style scoped lang="scss">
@import '@css/var.scss';

.dialog-product {
    .product-items {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .data-name{
            font-weight: 600;
        }

        .item {
            width: 294px;
            height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 1px solid #e6e6e6;
            padding: 10px;
            padding-right: 17px;
            margin-top: 10px;
            font-weight: 600;
            cursor: pointer;
            overflow: hidden;
            transition: all 0.3s;

            &.active,
            &:hover {
                border: solid 1px $primaryColor;
                color: $primaryColor;
                background-color: #edf1ff;
                position: relative;
            }

            &.active:before {
                content: '';
                position: absolute;
                display: block;
                width: 35px;
                height: 35px;
                background: $primaryColor;
                right: -18px;
                top: -18px;
                transform: rotate(-45deg);
            }

            &.active:after {
                content: '√';
                position: absolute;
                display: block;
                right: 2px;
                top: -2px;
                color: white;
                font-size: 13px;
            }

            .item-name {
                width: 90px;
            }
        }
    }

    .btn {
        text-align: center;
        margin: 60px 0 0;

        .row {
            & + .row {
                margin-top: 18px;
            }
        }

        .btn-clause {
            color: $primaryColor;
            cursor: pointer;
        }
    }
}
</style>